<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>我的消息</title>
    <link th:href="@{/layui/css/layui.css}" rel="stylesheet"/>
    <link th:href="@{/css/index.css}" rel="stylesheet"/>
    <link th:href="@{/css/tool.css}" rel="stylesheet"/>
    <link th:href="@{/css/notification.css}" rel="stylesheet"/>
    <link th:href="@{/css/global.css}" rel="stylesheet"/>
    <script th:src="@{/layui/layui.js}" type="application/javascript"></script>
    <script th:src="@{/js/jquery-3.4.1.min.js}" type="application/javascript"></script>

</head>
<body>
<div th:insert="~{navigation::nav}"></div>
<div class="layui-container fly-marginTop fly-user-main">
    <ul class="layui-nav layui-nav-tree layui-inline" lay-filter="user">
        <li class="layui-nav-item">
            <a th:href="@{'/notification/'+${session.user.id}+'/0'}" >
                <i class="layui-icon">&#xe611;</i>
                未读消息
            </a>
        </li>
        <span>&nbsp;</span>
        <li class="layui-nav-item">
            <a th:href="@{'/notification/'+${session.user.id}+'/1'}" >
                <i class="layui-icon">&#xe611;</i>
                已读消息
            </a>
        </li>
    </ul>

    <div class="site-tree-mobile layui-hide">
        <i class="layui-icon">&#xe602;</i>
    </div>
    <div class="site-mobile-shade"></div>

    <div class="site-tree-mobile layui-hide">
        <i class="layui-icon">&#xe602;</i>
    </div>
    <div class="site-mobile-shade"></div>


    <div class="fly-panel fly-panel-user" pad20>
        <div class="layui-tab layui-tab-brief" lay-filter="user" id="LAY_msg" style="margin-top: 15px;">
            <button class="layui-btn layui-btn-danger" id="LAY_delallmsg">清空全部消息</button>
            <div id="LAY_minemsg" style="margin-top: 10px;">
                <!--<div class="fly-none">您暂时没有最新消息</div>-->
                <ul class="mine-msg" th:each="unReadNotification : ${unReadNotifications}">
                    <li data-id="123">
                        <blockquote class="layui-elem-quote">
                            <p th:if="${unReadNotification.notification.type == 0||unReadNotification.notification.type == 5}">
                                <a style="color: #52baff;" th:text="${unReadNotification.zbInfo.title +' '}" th:href="@{'/show/'+${unReadNotification.zbInfo.id}}">
                                </a>
                                <span th:text="${unReadNotification.typeName + ' '}"></span>

                                <span style="color: #FF5722" th:text="${unReadNotification.notification.content}">
                                </span>
                            </p>

                            <p th:if="${unReadNotification.notification.type == 1 || unReadNotification.notification.type == 2||unReadNotification.notification.type == 5}">
                                <a th:href="@{'/show/'+${unReadNotification.zbInfo.id}}" style="color: #52baff;" th:text="${unReadNotification.zbInfo.title +' '}">
                                </a>
                                <span  th:text="${unReadNotification.notification.content + ' '}">
                                </span>
                                <span style="color: #FF5722" th:text="${unReadNotification.typeName }"></span>
                            </p>


                            <p th:if="${unReadNotification.notification.type == 3}">
                                <span style="color: #FF5722" th:text="${unReadNotification.typeName }"></span>
                                <span  th:text="${unReadNotification.notification.content + ' '}">
                                </span>
                            </p>

                            <p th:if="${unReadNotification.notification.type == 4}">
                                <a th:href="@{'/show/'+${unReadNotification.zbInfo.id}}" style="color: #52baff;" th:text="${unReadNotification.zbInfo.title +' '}"></a>
                                <span  th:text="${unReadNotification.notification.content}">
                                </span>
                            </p>


                        </blockquote>
                        <a href="" th:id="'readed'+${unReadNotification.notification.id}" th:onclick="'javascript:reading(\'readed'+${unReadNotification.notification.id}+'\');'">
                            <i class="layui-icon layui-icon-ok" th:if="${unReadNotification.notification.status==0}">  点击已读</i>
                            <i class="layui-icon layui-icon-ok" th:if="${unReadNotification.notification.status==1}">  已读</i>
                        </a>
                        <p>
                            <script language='javascript' th:inline="javascript">
                                function reading(id) {
                                    console.log(id)
                                    $.ajax({
                                        type:'get',
                                        url : '/notification/'+[[${unReadNotification.notification.id}]],
                                        success : function (res) {
                                            if(res.code==200){

                                            }
                                        }
                                    })
                                }
                                layui.use(['element','util'],function () {
                                    var element = layui.element,
                                        util = layui.util,
                                        $ = layui.$;
                                    var time = [[${unReadNotification.notification.createTime}]];
                                    $('#[[${unReadNotification.notification.id}]]').text(util.timeAgo(time, true))

                                    function reading(id) {
                                    console.log("test")
                                        $.ajax({
                                            type:'get',
                                            url : '/notification/'+[[${unReadNotification.notification.id}]],
                                            success : function (res) {
                                                if(res==200){
                                                    $("#id").text("已读")
                                                }
                                            }
                                        })
                                    }
                                })
                            </script><span th:id="${unReadNotification.notification.id}"></span>
                            <a th:if="${unReadNotification.notification.type == 0}" th:href="@{'/file/zbFIleDownload/'+${unReadNotification.zbInfo.id}}" class="layui-btn layui-btn-small layui-btn-danger fly-delete">下载招标文件</a>
                            <a th:if="${unReadNotification.notification.type == 1}" th:href="@{'/score/scoreJump/'+${unReadNotification.zbInfo.id}}" class="layui-btn layui-btn-small layui-btn-danger fly-delete">参加评标</a>
                            <a th:if="${unReadNotification.notification.type == 2||unReadNotification.notification.type == 4}" th:href="@{'/zb_result1/'+${unReadNotification.zbInfo.id}}" class="layui-btn layui-btn-small layui-btn-danger fly-delete">查看详情</a>
                        </p>

<!--                        <p th:if="${unReadNotification.notification.type == 1}"><span id="time" th:value="${unReadNotification.notification.createTime}">1小时前</span>-->
<!--                            <a th:href="@{'/score/scoreJump/'+${unReadNotification.zbInfo.id}}" class="layui-btn layui-btn-small layui-btn-danger fly-delete">参加评标</a>-->
<!--                        </p>-->
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
</body>

<script>
    layui.use(['element','util'],function () {
        var element = layui.element,
            util = layui.util,
            $ = layui.$;



    })

</script>
</html>